<template>
	<div id="video">
		<div class="input-box">
			<el-select v-model="api" placeholder="请选择接口">
				<el-option-group label="若无法播放请更换接口">
					<el-option v-for="item in arr" :key="item.id" :label="item.desc" :value="item.api">
						<span style="float: left">{{ item.desc }}</span>
						<span
							style="
					          float: right;
					          color: var(--el-text-color-secondary);
					          font-size: 13px;
					        "
						>
							{{ $DF(item.createTime, 'yyyy-MM-dd') }}
						</span>
					</el-option>
				</el-option-group>
			</el-select>
			<el-input class="inp" v-model="url" placeholder="请输入视频地址" clearable />
			<el-button @click="play">播放</el-button>
		</div>
		<div class="iframe-box"><iframe class="iframe" ref="iframe" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			arr: [],
			api: '',
			url: 'https://www.iqiyi.com/v_2085i808erg.html?vfm=2008_aldbd&fv=p_02_01'
		};
	},
	created() {
		this.getApiList();
	},
	mounted() {},
	methods: {
		getApiList() {
			this.$get('/video/getApiList').then(res => {
				this.arr = res.data;
			});
		},
		play() {
			this.$refs.iframe.src = this.api.replace('${url}', this.url);
		}
	},
	computed: {},
	filters: {}
};
</script>

<style lang="scss">
#video {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px;

	.input-box {
		width: 800px;
		margin: 0 auto;
		display: flex;
		gap: 20px;
		justify-content: space-around;
		padding-top: 20px;
		max-width: 100%;
		flex-wrap: wrap;
		.inp {
			width: 400px;
			max-width: 80%;
		}
		.el-button + .el-button {
			margin-left: 0;
		}
	}
	.iframe-box {
		flex: 1;
		margin: 10px;
		display: flex;
		.iframe {
			height: 100%;
			flex: 1;
			box-shadow: 0 0px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
			border: none;
		}
	}
}
</style>
